import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ichinesereader/exam/dto/assessment.response.dart';
import 'package:ichinesereader/exam/widgets/BGExamWidget.dart';
import 'BGSinglePlayer.dart';

class BGExamTypeOption extends StatelessWidget {
  final QuestionItem item;
  final String value;
  final ValueChanged<String> onChanged;
  final BGExamWidgetMode mode;
  final bool isShowJudge;

  const BGExamTypeOption(
      {Key? key,
      required this.item,
      required this.value,
      required this.mode,
      required this.isShowJudge,
      required this.onChanged})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    List items = item.body!.first;
    items.sort((a, b) => a.baseValue.compareTo(b.baseValue));
    return Wrap(
      runSpacing: 20,
      spacing: 20,
      children: [
        for (int i = 0; i < items.length; i++)
          _buildOptionItem(items[i], i, value == items[i].baseValue, context)
      ],
    );
  }

  Widget _buildOptionItem(
      QuestionContent body, int index, bool isSelect, BuildContext context) {
    RxInt answerJudge = 0.obs; // 0 不显示 // 1 正确 // 2 错误
    bool isCorrect = item.solution?.contains(body.baseValue) ?? false;
    bool isGrade =
        (mode == BGExamWidgetMode.Grade || mode == BGExamWidgetMode.Graded);
    bool isEditable =
        (mode == BGExamWidgetMode.Practice || mode == BGExamWidgetMode.Test);
    answerJudge.value = (isCorrect ? 1 : 2);

    if (mode == BGExamWidgetMode.Review) isSelect = false;
    if (!isShowJudge && isEditable) answerJudge.value = 0;
    if (isShowJudge && isEditable && !isSelect) answerJudge.value = 0;
    if (mode == BGExamWidgetMode.Review && answerJudge.value == 2)
      answerJudge.value = 0;
    if (isGrade && !isSelect && !isCorrect) answerJudge.value = 0;

    Color bgColor = Colors.transparent;
    Color borderColor = Color(0xffeeeeee);
    if ((isGrade || mode == BGExamWidgetMode.Review) && answerJudge.value == 1)
      bgColor = borderColor = Color(0x33409DAB);
    if ((isGrade || mode == BGExamWidgetMode.Review) &&
        answerJudge.value == 1 &&
        !isSelect) answerJudge.value = 0;
    if (isSelect)
      bgColor =
          borderColor = Get.isDarkMode ? Colors.white24 : Color(0xffD9DDE8);

    var widget = Row(
      children: [
        //圆形题号区
        Container(
          width: 30,
          height: 30,
          margin: EdgeInsets.symmetric(horizontal: 20),
          alignment: Alignment.center,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Get.isDarkMode
                ? Get.theme.primaryColorDark
                : Get.theme.primaryColor,
          ),
          child: Text((index + 1).toString(),
              style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.bold,
                  color: Get.isDarkMode
                      ? Colors.black
                      : Get.theme.primaryColorLight)),
        ),
        //句子+声音符号区
        Expanded(child: Row(
            children: [
              Visibility(
                  visible: body.image != null && body.image!.isNotEmpty,
                  child: SizedBox(
                      height: 150,
                      width: 150,
                      child: Image.network(body.image ?? ''))),
              Expanded(child: RichText(
                  text: TextSpan(
                      text: body.text ?? '',
                      style: TextStyle(
                          fontSize: 18,
                          height: 1.8,
                          color: Get.isDarkMode
                              ? Get.theme.primaryColorDark
                              : Colors.black),
                      children: [
                        WidgetSpan(
                            child: Visibility(
                                visible: body.show!.contains('audio') &&
                                    body.audio != null &&
                                    body.audio != '',
                                child: Container(
                                    padding: EdgeInsets.fromLTRB(6, 4, 6, 0),
                                    height: 30,
                                    width: 42,
                                    child: IconButton(
                                      iconSize: 30,
                                      padding: EdgeInsets.zero,
                                      icon: Icon(
                                        Icons.volume_up,
                                        color: Colors.orange,
                                      ),
                                      onPressed: () {
                                        BGSinglePlayer().play(body.audio);
                                      },
                                    ))))
                      ])))
            ]
        ))
      ],
    );
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        if (isEditable) {
          onChanged(body.baseValue ?? '');
        }
      },
      child: Row(children: [
        Container(
            child: widget,
            padding: EdgeInsets.only(top: 5, bottom: 5, right: 5),
            width: (MediaQuery.of(context).size.width) * 0.75,
            decoration: BoxDecoration(
                color: bgColor,
                border: Border.all(
                  color: borderColor,
                  width: 2,
                ),
                borderRadius: BorderRadius.circular(12))),
        // make align left properly even without answer
        Visibility(
          visible: answerJudge.value != 0,
          child: SizedBox(
              width: 60,
              child: Icon(answerJudge.value == 1 ? Icons.check : Icons.close,
                  color: answerJudge.value == 1 ? Colors.green : Colors.red,
                  size: 40)),
        ),
      ]),
    );
  }
}
